<template>
  <div class="reference-source" v-if="references && references.length > 0">
    <div v-if="showReferDescTitle">参考来源：</div>
    <div v-for="(sItem, sIndex) in references" :key="sIndex">
      <!--   sItem.type === 2 -->
      <v-button
        v-if="getReferenceType(sItem.type) === 'DOC'"
        type="link"
        kind="primary"
        @click="openSourceDrawer(references, sIndex)"
      >
        <v-icon remote name="basic_papers_line"></v-icon>
        {{ sItem.name || sItem.title }}
        <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
      </v-button>
      <v-button
        v-else-if="getReferenceType(sItem.type) === 'SEARCH'"
        type="link"
        kind="primary"
        v-blank
        @click="openSearchUrl(sItem, sIndex)"
      >
        <v-icon remote name="basic_url_line"></v-icon>
        {{ sItem.id }}.{{
          isMobile
            ? formattedEllipsis(sItem.name || sItem.title, 15)
            : formattedEllipsis(sItem.name || sItem.title)
        }}
        <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
      </v-button>
      <v-button
        v-else
        type="link"
        kind="primary"
        @click="openSourceDrawer(references, sIndex)"
      >
        <v-icon remote name="basic_q_a_line"></v-icon>
        {{ sItem.name || sItem.title }}
        <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
      </v-button>
    </div>
    <!-- 设计稿突然没了这块 -->
    <!-- <div class="expand-control" @click="onExpand">
          共{{ references.length }}个参考来源
          <span>{{ isExpand ? '展开' : '收起' }}</span>
          <v-icon :remote="true" name="arrow_down_small_line" size="12" class="reference__collapse__icon" :rotate="!isExpand ? 180 : 0"></v-icon>
      </div> -->
  </div>
</template>

<script>
import { replaceLinks, formattedEllipsis } from "@/utils";

import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
export default {
  components: {
    VueJsonPretty,
  },
  data() {
    return {
      references: [],
      // isOpen: true
      // TOKENS_STATUS,
      isExpand: true,
    };
  },
  props: {
    // 是否展示”参考来源：“
    showReferDescTitle: {
      type: Boolean,
      default: true,
    },
    referencesList: {
      type: Array,
      default: () => [],
    },
    expandNum: {
      type: Number,
      default: 3,
    },
  },
  directives: {
    blank: {
      inserted(el) {
        if (el.tagName === "A") {
          el.setAttribute("target", "_blank");
        }
      },
    },
  },
  computed: {},
  methods: {
    replaceLinks,
    // isEmpty,
    formattedEllipsis,
    getReferenceType(type) {
      // 参考来源类型 1-QA  2-文档 4-search 分三类展示 default展示search
      switch (type) {
        case 1:
          return "QA";
        case 2:
          return "DOC";
        case 4:
        default:
          return "SEARCH";
      }
    },
    openSearchUrl(refer, index) {
      // console.log('【reference】', refer, index);
      window.open(refer.url);
    },
    openSourceDrawer(refers, index) {
      // console.log('【reference】drawer', refers, index);
      if (this.webIMSource === "manage" || this.isExperience) {
        this.$emit("openBottomDrawer", true);
        const payload = JSON.stringify({
          from: "webim",
          type: "audit-reference",
          record: refers,
          openId: refers[index].ids[0],
          openIndex: index,
        });
        window.parent.postMessage(payload, "*");
      } else {
        // const url = refers[index].url;
        // url && window.open(url);
        this.$emit("openBottomDrawer", true, refers[index]);
      }
    },
    formatteReference(references) {
      let res = references;
      if (references && references.length > 0) {
        res = references.reduce((result, item) => {
          if (this.getReferenceType(item.type) === "DOC") {
            const existingItem = result.find(
              (i) => i.doc_id === item.doc_id && i.type === item.type
            );
            if (existingItem) {
              existingItem.ids.push(item.id);
            } else {
              result.push({ ...item, ids: [item.id] });
            }
          } else {
            result.push({ ...item, ids: [item.id] });
          }
          return result;
        }, []);
      }
      return res;
    },
    onExpand() {
      this.isExpand = !this.isExpand;
    },
  },
  watch: {
    referencesList: {
      handler(val, oldValue) {
        // console.log('【references】', val);
        let refer = this.formatteReference(val);
        this.references = refer;
        // console.log('【references】res', refer);
      },
      immediate: true, // 立即触发handler函数
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.isShow {
  // border-radius: var(--radius-large);
}

.reference-source {
  // background: pink;
  // margin: 12px 0;
  font-size: 14px;
  color: var(--color-text-caption);
  text-align: left;
  position: relative;
  .v-button {
    text-decoration: none;
    text-align: left;
  }
  .expand-control {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    cursor: pointer;
    & > span {
      color: var(--link---color-link-normal, #3e71ff);
    }
  }
}
</style>
